=x= 🌵 Yachts 前台頁面 Layout & deck plan / Video - Content Page 後端功能製作。

Layout & deck plan / Video 內容區塊資料分析介紹 :

📌 Layout & deck plan 跟 Video 分頁內容較簡單，所以就一起介紹如何處理 :

1. Layout & deck plan - 帶有 CSS 樣式的連續圖片。

2. Video - 嵌入 YouTube 影片。

Layout & deck plan - Content Page 頁面後端實作 :

1. 於前台資料夾右鍵新增"使用主版頁面的 Web Form" 並指定 Yachts.Master為主版。

2. 於內容區塊內放入 Layout & deck plan 分頁內容程式碼，並使用 asp:Literal 等修改參考如下

3. 於後置程式碼 Page_Load 事件內加入讀取內容方法 loadContent(); 參考如下

protected void Page_Load(object sender, EventArgs e)
{
    //會先跑 Content 頁的 Page_Load 才跑 Master 頁的 Page_Load
    if (!IsPostBack) {
        loadContent();
    }
}

4. 建立取得 Layout & deck plan 分頁內容 loadContent(); 方法邏輯如下

private void loadContent()
{
    //取得 Session 共用 Guid，Session 物件需轉回字串
    string guidStr = Session["guid"].ToString();
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    //依 Guid 取得型號資料
    string sql = "SELECT layoutDeckPlanImgPathJSON FROM Yachts WHERE guid = @guidStr";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guidStr", guidStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    StringBuilder layoutHtmlStr = new StringBuilder();
    List<LayoutPath> saveImagPathList = new List<LayoutPath>();
    if (reader.Read()) {
        string loadImgJson = HttpUtility.HtmlDecode(reader["layoutDeckPlanImgPathJSON"].ToString());
        //加入頁面組圖 HTML
        saveImagPathList = JsonConvert.DeserializeObject<List<LayoutPath>>(loadImgJson);
        foreach (var item in saveImagPathList) {
            //加入每張圖片
            layoutHtmlStr.Append($"<li><img src='upload/Images/{item.SavePath}' alt='layout' Width='670px' /></li>");
        }
        //渲染畫面
        ContentHtml.Text = layoutHtmlStr.ToString();
    }
    connection.Close();

}

//頁面組圖 JSON 資料
public class LayoutPath
{
    public string SavePath { get; set; }
}

• 🌵 <img> 屬性加上 Width='670px' 避免圖片太大超出畫面。

5. 模擬頁面檢查是否正確呈現，完成~

Video - Content Page 頁面後端實作 :

1. 於前台資料夾右鍵新增"使用主版頁面的 Web Form" 並指定 Yachts.Master為主版。

2. 去 YouTube 任意影片點擊分享，並選擇嵌入功能，設定想要的模式後點擊複製

• 🌵 點擊複製後會將上方的 <iframe> 全選並複製。

• 👺 如果勾選啟用隱私權加強保護模式，連結會變成 www.youtube-nocookie.com 但是這樣做無法用於內嵌影片，請不要勾選。

3. 於內容區塊內放入 Video 分頁內容程式碼，並貼上複製的 <iframe> 程式碼，將 <iframe> 的 src 屬性內容改為 "#" ，並加入 id 及 runat="server" 參考如下

• 🌵 需自行換算尺寸調整為適合頁面的長寬比。

• 🌵 src="#" 為無意義連結，後面會帶入各型號的連結。

4. 於後置程式碼 Page_Load 事件內加入讀取內容方法 loadContent(); 參考如下

protected void Page_Load(object sender, EventArgs e)
{
    //會先跑 Content 頁的 Page_Load 才跑 Master 頁的 Page_Load
    if (!IsPostBack) {
        loadContent();
    }
}

5. 建立取得 Video 分頁內容 loadContent(); 方法邏輯如下

private void loadContent()
{
    List<RowData> saveRowList = new List<RowData>();
    //取得 Session 共用 Guid，Session 物件需轉回字串
    string guidStr = Session["guid"].ToString();
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    //依 Guid 取得型號資料
    string sql = "SELECT overviewDimensionsJSON FROM Yachts WHERE guid = @guid";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guid", guidStr);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string loadJson = HttpUtility.HtmlDecode(reader["overviewDimensionsJSON"].ToString());
        saveRowList = JsonConvert.DeserializeObject<List<RowData>>(loadJson);
        // List<T> 第一筆資料是放影片連結
        string youtubeUrlStr = saveRowList[0].SaveValue;
        //如果沒有影片連結就導回 OverView 分頁
        if (String.IsNullOrEmpty(youtubeUrlStr)) {
            Response.Redirect($"Yachts_OverView.aspx?id={guidStr}");
        }
        else {
            //將取出的 YouTube 連結字串分離出 "影片 ID 字串"
            //使用者如果是用分享功能複製連結時處理方式
            string[] youtubeUrlArr = youtubeUrlStr.Split('/');
            //使用者如果是直接從網址複製連結時處理方式
            string[] vedioIDArr = youtubeUrlArr[youtubeUrlArr.Length - 1].Split('=');
            //將 "影片 ID 字串" 組合成嵌入狀態的 YouTube 連結
            string strNewUrl = "https:/" + "/youtube.com/" + "embed/" + vedioIDArr[vedioIDArr.Length - 1];
            //更新 <iframe> src 連結
            video.Attributes.Add("src", strNewUrl);
        }
    }
    connection.Close();
}

// JSON 資料
public class RowData
{
    public string SaveItem { get; set; }
    public string SaveValue { get; set; }
}

• 🌵 YouTube 連結需加入 /embed/ 才是嵌入模式。

• 🌵 YouTube 分享功能的連結，最後一個反斜線之後的字串是影片的唯一 ID。

• 🌵 YouTube 瀏覽器網址的連結，最後一個等於符號之後的字串是影片的唯一 ID。

6. 模擬頁面檢查是否正確呈現，完成~

本日總結 :

📢 今天的內容就是單純的圖片跟影片嵌入頁面，影片嵌入的小細節只要仔細觀察連結，就可以發現嵌入的連結跟一般分享的連結不同，還有不同影片最後面的字串不同，所以最後面的字串就是影片識別 ID，也做了如果使用者直接從網址複製連結的處理，另外，如果要設定自動撥放，要設成靜音才能自動撥放。

• 明日將介紹專案製作完成後可以進行優化的相關細節。